<template>
  <div class="q-pa-sm q-gutter-y-sm">
    <!--        Loading-->
    <q-linear-progress stripe indeterminate style="height: 1px" v-show="loading"/>
    <!--        toolbar-->
    <q-toolbar class="text-primary">
      <q-btn flat round dense icon="home" @click="onClickLeft"/>
      <q-toolbar-title>
        新建ReptileBook
      </q-toolbar-title>
    </q-toolbar>
    <div class="q-pa-md" style="max-width: 300px">
      <q-select v-model="choseValue" :options="novelSites" emit-value label="Site"
                option-value="id" option-label="siteName"  behavior="menu" option-disable="inactive" map-options />

<!--            <van-popup v-model="novelSitePicker" position="bottom" > <van-picker :show-toolbar="true" @cancel="novelSitePicker = false"-->
<!--                                                                                 @change="onChange"  :columns="novelSites" :default-index="choseNovelSiteIndex" value-key="siteName"/></van-popup>-->
      <q-input label="原始id" placeholder="eg:wunjuc" v-model="novelbook.oriBookId"/>
      <q-input label="书名" placeholder="请输入书名" v-model="novelbook.bookName"/>
      <q-input label="作者" placeholder="作者" v-model="novelbook.author"/>
      <q-input label="类别" placeholder="修真 科幻 游戏.." v-model="novelbook.category"/>
      <q-input v-show="false" value="1" v-model="novelbook.state"/>
      <q-btn color="primary" label="提 交" @click="newBook"/>
        </div>
        <div>
            <van-cell-group>
                <van-cell :title="item.name" :key="item.id" value="测试" is-link v-for="(item) in testList" @click="testReptile(item.id)"/>
                <p v-show="testResult!=null">{{testResult}}</p>
            </van-cell-group>
        </div>
    </div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'newbook',
  data () {
    return {
      novelbook: {},
      novelSites: [{ id: 0, siteName: '加载中' }],
      novelSitePicker: false,
      testList: [], // 测试列表
      testResult: null, // 测试结果
      loading: false,
      choseValue: {}
    }
  },
  mounted () {
    this.queryAllNovelSite()
  },
  methods: {
    newBook () {
      const _this = this

      let novelSite = null
      _this.novelSites.forEach(site => {
        if (site.id === _this.choseValue) {
          novelSite = site
        }
      })
      console.log(_this.choseValue)
      const novelBook = _this.novelbook
      novelBook.webUrl = novelSite.siteUrl
      novelBook.fromUrl = novelSite.bookUrl.replace('%bkid', novelBook.oriBookId)
      novelBook.mlPQuery = novelSite.mlpquery
      novelBook.mlQuery = novelSite.mlquery
      novelBook.contentQuery = novelSite.contentquery
      novelBook.novelSiteId = novelSite.id
      novelBook.state = 1
      axios({
        url: '/novelBook/insertNovelBook',
        params: novelBook
      }).then(res => {
        if (res.data.state === 'success') {
          _this.$q.notify('success')
          _this.novelbook = {}
          _this.testList.push({ name: novelBook.bookName, id: res.data.obj })
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    queryAllNovelSite () {
      const _this = this
      axios({
        url: '/novelSite/queryAllNovelSite'
      }).then(res => {
        if (res.data.state === 'success') {
          _this.novelSites = res.data.obj
          _this.choseValue = _this.novelSites[0]
        }
      })
    },
    onChange (e, i) {
      console.log(e, i)
    },
    testReptile (id) {
      const _this = this
      axios({
        url: '/reptile/testReptile',
        params: {
          bookId: id
        }
      }).then(res => {
        if (res.data.state === 'success') {
          _this.testResult = res.data.obj
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
